<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

            <el-col :span="6">
                <el-form-item label="供应商名称:" prop="supplierName">
                    <el-input maxlength="30" v-model="queryParams.supplierName" clearable placeholder="请输入供应商名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="变更时间:" prop="startTime">
                    <el-date-picker
                        v-model="dataRange"
                        type="daterange"
                        align="left"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>

        </SearchContent>
        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleExport"
                           v-hasPermi="['vendorManage:changeRecord:export']">导出
                </el-button>
            </div>
            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column min-width="210" show-overflow-tooltip label="变更内容" align="center" prop="changeLogDetails">
                        <template v-slot="{row}">
                            {{ row.changeLogDetails|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="210" show-overflow-tooltip label="供应商编码" align="center" prop="supplierCode">
                        <template v-slot="{row}">
                            {{ row.supplierCode|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="130" show-overflow-tooltip label="供应商名称" align="center" prop="supplierName">
                        <template v-slot="{row}">
                            {{ row.supplierName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="130" show-overflow-tooltip label="提交人" align="center" prop="submitName">
                        <template v-slot="{row}">
                            {{ row.submitName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" show-overflow-tooltip label="变更时间" align="center" prop="changeTime">
                        <template v-slot="{row}">
                            {{ row.changeTime|filterNull }}
                        </template>
                    </el-table-column>
                </template>
            </table-page>
        </div>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {supplierChangeLog} from "@/api/memberManage/vendorList";

export default {
    name:"ChangeRecord",
    components: {
        SearchContent
    },
    dicts: [],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                supplierName: null,
                startTime: null,
                endTime: null,
            },
            total: 0,
            dataList: [],
            dataRange: []
        };
    },
    created() {
        this.handleQuery()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;

            this.queryParams.startTime = this.dataRange && this.dataRange[0] ? this.dataRange[0] : ''
            this.queryParams.endTime = this.dataRange && this.dataRange[1] ? this.dataRange[1] : ''

            supplierChangeLog(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                }
            }).finally(f => {
                this.loading = false;
            });
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                supplierName: null,
                startTime: null,
                endTime: null,
            },
                this.dataRange = []
            // this.resetForm("queryForm");
            this.handleQuery();
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('/supplier/supplierChangeLog/export', {
                ...this.queryParams
            }, `变更记录.xlsx`)
        },
    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}


.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
